<template>
  <div>
    <div>
      <table>
        <tr>
          <td class="title1">专业名称：</td>
          <td class="cont1">供电专业</td>
          <td></td>
          <td class="title1">科室名称：</td>
          <td class="cont1">供电技术科</td>
        </tr>
        <tr>
          <td class="title1">绝缘工具名称：</td>
          <td>
            <a-select
              style="width: 200px" v-model:value="orgname"
              show-search
              :options="options"
              :filter-option="filterOption"
              @focus="handleFocus"
              @blur="handleBlur"
              @change="handleChange">
              <!--  -->
            </a-select>
          </td>
          <td></td>
          <td><button class="button1" @click="handleFilter(orgname)">查询</button></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td>
            <button class="button1" @click="handleAddClick">新增</button>
          </td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>
    <div>
      <a-table :data-source="data">              
        <a-table-column key="jueyuangongju" title="绝缘工具" data-index="jueyuangongju" />
        <a-table-column-group>
          <template #title>电器试验标准</template>
          <a-table-column key="gongzuodianya" title="工作电压(kv)" data-index="gongzuodianya" />
          <a-table-column-group>
            <template #title>交流实验电压</template>
            <a-table-column key="shiyandianya" title="试验电压(kv)" data-index="shiyandianya" />
            <a-table-column key="shiyanchangdu" title="试验长度(m)" data-index="shiyanchangdu" />
          </a-table-column-group>
          <a-table-column key="shiyanchixushijian" title="试验持续时间（分）" data-index="shiyanchixushijian" />
          <a-table-column key="shiyanzhouqi" title="试验周期（月）" data-index="shiyanzhouqi" />
        </a-table-column-group>
        <a-table-column key="danwei" title="单位" data-index="danwei" />
        <a-table-column key="yongtu" title="用途" data-index="yongtu" />
        <a-table-column key="beizhu" title="备注" data-index="beizhu" />
        <!-- <a-table-column key="caozuo" title="操作">
          <template>
              <a-button type="primary">编辑</a-button>
              <a-button type="">删除</a-button>
          </template>
          </a-table-column> -->
        <!-- <template #bodyCell="{ record }"> -->
        <a-table-column key="action" title="操作">
          <template #default="{record}">
            <span>
              <a-divider type="vertical" />
              <a-button class="button1" @click="editShow(record)">编辑</a-button>
              <!-- <a-button class="button1" @click="deleteClick(record.id)">删除</a-button> -->
              <a-popconfirm
                v-if="data.length"
                title="Sure to delete?"
                @confirm="deleteClick(record.id)"
              >
                <button class="button1">删除</button>
              </a-popconfirm>
            </span>
          </template>
        </a-table-column>
      <!-- </template> -->
      </a-table>
    </div>
    <Modal ref="modalRef" @load-data="load()" />
    <EditModal ref="editRef" @load-data="load()" />
    <!-- <editModal ref="editRef" :record="record"/> -->
  </div>
</template>

<script setup>
// import { DownOutlined } from '@ant-design/icons-vue';
import { onMounted, ref } from 'vue'
import { GdBaseInfoApi } from '@/api/insulated/GdBaseInfoApi'
// import axios from 'axios'
// import request from '@/utils/request'
import { message } from 'ant-design-vue'
import Modal from '../gd/BaseInfoModal.vue'
import EditModal from '../gd/BaseinfoEditModal.vue'

// const size = ref('large')
let orgname = ref('请选择')
const options = ref([{
      value: '绝缘手套',
      label: '绝缘手套',
    }, {
      value: '接地杆',
      label: '接地杆',
    }, {
      value: '验电器',
      label: '验电器',
    }, {
      value: '绝缘靴',
      label: '绝缘靴',
    }, {
      value: '等电位杆',
      label: '等电位杆',
    }
  ]);
    const handleChange = shopvalue => {
      console.log(shopvalue);
    };
    const handleBlur = () => {
      console.log('blur');
    };
    const handleFocus = () => {
      console.log('focus');
    };
    const filterOption = (input, option) => {
      return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };

const data = ref()
const modalRef = ref(null)
const editRef = ref(null)

onMounted( async() => {
 await loadData()
  // console.log(data.value)
})

const load =async () =>{
  // console.log(999)
  await loadData()
}

const loadData = async () => {
  const result = await GdBaseInfoApi.find()
  console.log(0)
  data.value = result.data.data
  // console.log(data.value)
}

const handleAddClick = async () => {
  // console.log("add")
  modalRef.value.showModal()
  // await loadData()
}
const editShow = async (record) =>{
  editRef.value.showModal(record)
}
const deleteClick = async(id)  => {
  //  console.log(id)
  await GdBaseInfoApi.delete(id)
  await loadData()
}

const handleFilter =async (orgname)=> {
      const result = await GdBaseInfoApi.search(orgname)
      // const result=await request.get(`/feathers/gd-base-info?jueyuangongju=${orgname}`)
      // console.log(result.data)
      data.value=result.data.data
      message.success('查询完成')
    }
</script>

<style scoped>
.title1 {
  font-size: 20px;
  font-weight: bold;
}

.cont1 {
  font-size: 20px;
}

.button1 {
  background-color: #1890FF;
  border: 1px solid #fff;
  color: #fff;
  width: 100px;
  height: 40px;
  font-size: 15px;
  cursor: pointer;
}
</style>